<template>
  <input
    type="text"
    class="hminput"
    @input="handleInput"
    @blur="handleBlur"
    :[propsname]="{ success: flag, error: !flag }"
  />
</template>

<script>
export default {
  // props: ["value"],
  data() {
    return {
      flag: "",
      propsname: "",
    };
  },
  props: {
    rule: {
      type: RegExp,
    },
  },
  methods: {
    handleInput(e) {
      // console.log(e);
      let v = e.target.value;
      console.log(e.target.value);
      this.$emit("input", v);
    },
    handleBlur(e) {
      let v = e.target.value;

      if (this.rule) {
        if (this.rule.test(v)) {
          this.propsname = "class";
          this.flag = true;
        } else {
          this.flag = false;
        }
      }
    },
  },
};
</script>
<style lang='less' scoped>
.hminput {
  width: 318/360 * 100vw;
  height: 60px;
  outline: none;
  border: none;
  border-bottom: 3px solid #ccc;
  font-size: 20px;
  line-height: 60px;
}
.success {
  border-bottom-color: green;
}
.error {
  border-bottom-color: red;
}
</style>
